<template functional>
  <a-sub-menu :key="props.menuInfo.id">
     <span slot="title">
       <a-icon :type="props.menuInfo.menuIcon"/>
          <span>{{ props.menuInfo.title }}
       </span>
     </span>
    <template v-for="item in props.menuInfo.children">
      <a-menu-item v-if="!item.children" :key="item.id" @click="parent.handleMenuItemClick(item)">
        <a-icon :type="item.menuIcon"/>
        <span>{{ item.title }}</span>
      </a-menu-item>
      <sub-menu v-else :key="item.id" :menu-info="item"/>
    </template>
  </a-sub-menu>
</template>

<script>
export default {
  props: ['menuInfo']
};
</script>
